<template>
  <div class="search" :style="opacity" v-if="showSearch">
    <p class="search-back iconfont icon-fanhui"  @click.self="handleBackClick"></p>
    <input class="search-content" :style="padding" :placeholder="placeholder" v-model="content" type="text" @click="handleInputClick">
    <p class="search-bt" @click="handleSearchBtClick">
      搜索
    </p>
    <div class="search-list" v-if="showList || content" @click.self="handleSearchList">
      <!-- 历史搜索 -->
      <div v-if="historyData.length">
        <h3 class="search-list-title">历史搜索</h3>
        <ul>
          <li v-for="(historyItem,index) in historyData" :key="index" @click="handleHotListClick(historyItem)">
            {{historyItem}}
          </li>
        </ul>
      </div>
      <!-- 热门搜索 -->
      <div v-if="hotSelect.length">
        <h3 class="search-list-title">热门搜索</h3>
        <ul>
          <li v-for="(item,index) in hotSelect" :key="index" @click="handleHotListClick(item)">
            {{item}}
          </li>
        </ul>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="searchResult" v-if="content">
      <ul>
        <home-products :newProducts="searchResultData"></home-products>
				<li v-if="!searchResultData.length">
					<img class="no-result" src="/images/no-result.jpg" alt>
					<h3 class="title">暂无搜索结果</h3>
					<p class="tips">换个关键词试试</p>
				</li>
      </ul>
    </div>
  </div>
</template>

<script>
import FadeAnimation from '../animation/Fade'
import HomeProducts from './Products'
  
export default{
  name: 'HomeSearch',
  props: ["searchView","newProducts"],
  data() {
    return {
      showSearch: false,
      content: '',
      showList: false,
      getSearchView: true,
      placeholder: '想吃什么搜一搜',
      historyData: [],
      productsData: [],
      searchResultData: [],
      opacity: { opacity: 0 },
      padding: {},
      
    }
  },
  watch: {
    content: function() {
      this.matchedData()
    },
    searchView: function() {
      this.getSearchView = this.searchView
      this.cloSearchView()
    },
    newProducts: function() {
      this.getDate()
      this.matchedData()
    },
    closeSearchView: function() {
      
    }
  },
  mounted() {
    this.getDate()
  },
  created() {
    window.addEventListener("scroll", this.topScroll)
  },
  methods: {
    getDate() {
      this.productsData = this.newProducts
    },
    cloSearchView() {
      this.showSearch = this.getSearchView
    },
    topScroll() {
      var top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
      if(!this.content){
        if(top >= 30) {
          this.showSearch = true
          var opacity = (top-30)/30
          opacity = opacity > 1 ? 1 : opacity
        }
        if(top < 30){
          this.showSearch = false
          opacity = 0
        }
        this.opacity = {
          opacity
        }
      }
    },
    matchedData() { //匹配数据,如果匹配到数据将存到新数组
      this.searchResultData = []
      this.productsData.forEach((item) => {
        if(item.title.indexOf(this.content) > -1){
          this.searchResultData.push(item)
        }
      })
    },
    handleInputClick() {
      this.showList = true
      this.$emit('filterView',false)
      this.padding = {
        'padding-left': 5 + 'vw',
        'text-align': 'left',
        }
     },
    handleBackClick() {
      this.content = ''
      this.showList = false
      this.placeholder = '想吃什么搜一搜'
      this.$emit('filterView',true)
      this.padding = {
        'padding-left': 0 + 'vw',
        'text-align': 'center',
        }
    },
    handleSearchList() {
      this.handleBackClick()
    },
    handleSearchBtClick() {
      this.historyData.push(this.content)
      this.matchedData()
    },
    handleHotListClick(item) {
      this.content = item
    }
  },
  computed: {
    hotSelect() {
      return this.$store.state.rst.hotSelect
    }
  },
  components: {
    FadeAnimation,
    HomeProducts,
  },
  
}
</script>

<style scoped>
.search { height: 0; padding-bottom: 16vw; background: #fff; position: fixed; top: 0; left: 0; right: 0; z-index: 1;}
.search-content { width: 69vw; height: 9.6vw;  text-align: center; margin: 3vw 6vw 3vw 3vw; border-radius: 6vw; border: 0; background: rgba(0,0,0, 0.1);}
.search-back { position: absolute; top: 3.8vw; left: 5vw; font-size: 7vw;}
.search-bt {position: absolute; top: 3.8vw; right: 4vw; }
.search-list { position: absolute; top: 15.3vw; padding: 3vw 5vw; width: 100vw; height: 100vh; background: #fff; padding-left: 4vw; overflow: auto;}
.search-list-title{ text-align: left; margin: 0 0 0 1.2vw; font-size: 4.5vw; color: #000000;}
.search-list ul {overflow: auto; margin: 3vw 0 6vw 0; padding-right: 10vw;}
.search-list ul li { list-style-type: none; float: left; font-size: 3.6vw; padding: 2vw 3.2vw; margin: 1.2vw; background: rgba(0,0,0,.03);}
.searchResult { position: absolute; top: 15.3vw; padding: 3vw 5vw 3vw 0; width: 100vw; height: 100vw; background: #fff; overflow: auto;}
.searchResult > ul {overflow: auto; margin: 3vw 0 6vw 0; padding-right: 2vw;}
.searchResult > ul > li { list-style-type: none; font-size: 3.6vw; padding: 2vw 3.2vw; margin: 1.2vw; text-align: left;}
.no-result { display: block; width: 60vw; margin: 6vw auto 1vw auto;}
.title { text-align: center; margin: 3vw 0 2.3vw 0;}
.tips { text-align: center; font-size: 3.2vw;}
</style>
